<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>

<div id="app">
    <!--1.搜索条-->
    <el-form :inline="true" :model="formStudent" class="demo-form-inline">
        <el-form-item label="姓名">
        <el-input v-model="formStudent.username" placeholder="请输入搜索姓名..."></el-input>
    </el-form-item>
        <el-form-item label="年级">
            <el-select v-model="formStudent.grade" placeholder="请选择年级...">
                <el-option label="一年级" value="0"></el-option>
                <el-option label="二年级" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
            <el-button type="danger" icon="el-icon-refresh" @click="clean()">重置</el-button>
        </el-form-item>
    </el-form>

    <!--2.操作按钮-->
    <el-row>
        <el-button @click="batchDelete()" type="danger" icon="el-icon-delete-solid">批量删除</el-button>
        <el-button @click="add()" type="primary" icon="el-icon-circle-plus">新增数据</el-button>
    </el-row>

    <!--3.表格-->
    <el-table
            height="580px"
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
    >
        <!--多选框-->
        <el-table-column
                type="selection"
                width="55"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>

        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码"
                width="180">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态">
        </el-table-column>
        <!--操作按钮-->
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--4.分页组件 -->
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 15, 20, 25]"
            :page-size="5"
            layout="sizes, prev, pager, next, jumper, ->, total"
            :total="100">
    </el-pagination>


    <!--弹出框-->
    <el-dialog :title="titl" :visible.sync="dialogFormVisible">
        <el-form :model="student">
            <el-form-item label="学生名字" :label-width="formLabelWidth">
                <el-input v-model="student.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学生的班级" :label-width="formLabelWidth">
                <el-select v-model="student.grade" placeholder="请选择年级：">
                    <el-option label="一年级" value="shanghai"></el-option>
                    <el-option label="二年级" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学生地址" :label-width="formLabelWidth">
                <el-input v-model="student.address" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addData()">确 定</el-button>
        </div>
    </el-dialog>

</div>

</body>
</html>
<!--引入vue.js-->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!--引入element-ui.js-->
<!--<script src="element-ui/lib/index.js"></script>--><!--本地-->
<!--在线-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>

    new Vue({
        el:'#app',
        data(){
            return {
                titl:'新增',
                student: {
                    name: '',
                   grade: '',

                },
                formLabelWidth: '120px',
                dialogFormVisible: false,
                formStudent: {
                    username: 'zs',
                    grade: '一年级'
                },
                tableData: [],
                multipleSelection: [],
                currentPage: 1
            }
        },
        methods: {
            //查询全部数据的函数
            findAll(){
                axios.get("http://localhost:8080/ajax/findAll").then((resp) => {
                    console.log(resp);
                    //将查询后的数组赋值给data中需要渲染的数据即可
                    this.tableData = resp.data;
                });
            },

            //搜索的函数
            onSubmit() {
                console.log('submit!');

            },
            //重置搜索条件的函数
            clean(){
                this.formStudent={};
            },
            //表格变色的方法
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return 'warning-row';
                } else if (rowIndex % 3 === 0) {
                    return 'success-row';
                }
                return '';
            },
            //编辑功能
            handleEdit(row) {
                console.log(row);
                this.titl="编辑数据";

                //查询修改前的数据
                this.student = row;

                this.dialogFormVisible = true;
            },
            //删除功能
            handleDelete(row) {
                console.log(row);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });



                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //多选按钮选中取消操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            //每页显示条数改变触发
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);

            },
            //当前页发生改变触发
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            //批量删除
            batchDelete(){
                //判断是否选中
                if(this.multipleSelection.length === 0){
                    this.$message.error('抱歉，请求选择需要删除的项');
                }else{

                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }


            },
            //新增
            add(){
                this.student = {}
                console.log("新增数据")
                this.titl="新增数据";
                this.dialogFormVisible=true;
            },
            //弹出框的确定功能
            addData(){
                var title = this.titl;
                if(title=="新增数据"){
                    //执行新增操作
                    axios.post("http://localhost:8080/ajax/add",this.student).then((resp) => {
                        console.log(resp.data)
                        if(resp.data == "success"){

                            this.$message.success("新增成功");
                            this.findAll();//重新查询
                        }else{
                            this.$message.error("新增错误");

                        }
                        this.dialogFormVisible = false;

                    });




                }else if(title=="编辑数据"){
                    //执行编辑操作
                }else{
                    //操作出现问题请重试
                }

                //思路二：判断新增数据有没有id
                //新增数据直接输入没有id
                //编辑数据需要从数据库中根据id查询  查询后的值赋值给表单的对象 会存在id
            }
        },
        //查询全部数据
        mounted() {
            //页面挂载完毕查询数据
           this.findAll();
        }



    });

</script>